<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<script type="text/javascript" src="../js/lib/remtest.js" ></script>
		<!--App自定义的css-->
		<link rel="stylesheet" href="../css/zjteamapp.css" />
		<script type="text/javascript" src="../js/iconfont.js"></script>
		<style>
			.iconzs {
				width: 0.24rem;
				height: 0.24rem;
				
				fill: currentColor;
				overflow: hidden;
			}
			body {
				background: url(../images/loginbg.jpg) no-repeat center;
			}
			
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-input-group {
				position: relative;
				padding: 0;
				border: 0;
				background-color: rgba(0, 0, 0, 0);
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				/*-webkit-filter: grayscale(100%); */
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
			
			.mui-input-group:before {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.mui-input-group:first-child {
				margin-top: 180px;
			}
			
			.mui-content-padded {
				margin-top: 50px;
			}
			
			.mui-btn-blue,
			.mui-btn-primary,
			input[type=submit] {
				color: #fff;
				border: 1px solid #ecb714;
				background-color: #ecb714;
				border-radius: 30px;
			}
			
			.link-area {
				display: block;
				margin-top: 200px;
				text-align: center;
			}
			
			#forgetPasswordp {
				float: right;
				color: #b5b5b5;
				padding-top: 10px;
			}
			
			#forgetPasswordp a {
				color: #b5b5b5;
			}
			
			#forgetPasswordp:after {
				clear: both;
				content: "";
				height: 0px;
				display: block;
				visibility: hidden;
			}
			
			#login-form {
				width: 95%;
				margin: 0 auto;
			}
			
			.mui-input-group:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.link-area {
				color: #b5b5b5;
			}
			
			.link-area a {
				color: #ecb714;
			}
			
			
			
				.mui-input-group label {
				width: 0.54rem;
				/*padding: 0 0.2rem;*/
				line-height: 0.5rem;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				float: left;
				width: 85%;
				margin-bottom: 0;
				padding-left: 0.2rem;
				border: 0;
				padding-top: 0.4rem;
			}
			
			.mui-input-group .mui-input-row{
				height:0.76rem;
				font-size: 0.24rem;
				color: #B6B6B6;
				line-height: 0.76rem;
				
			}
			
		</style>

	</head>

	<body>

		<div class="mui-content">

		 <div style="text-align: center;margin: 0 auto; margin-top: 0.74rem; margin-bottom: 1.9rem; height: 0.78rem; width:1.38rem; ">
            <img src="../images/zclogo.png" width="100%">
        </div>

			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<label>
						 <span class="mui-icon" >	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-shuruzhanghao"></use>
								</svg>
		                    </span>
					</label>
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号码">
				</div>
				<div class="mui-input-row">
					<label>
						<span class="mui-icon" >	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-shoujidenglu"></use>
								</svg>
		                    </span>
					</label>
					<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">

				</div>
				<p id='forgetPasswordp'>
					<a id='forgetPassword'>忘记密码？</a>
				</p>
			</form>
			<div id="autoLogin"></div>

			<div class="mui-content-padded">

				<button id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
				<div class="link-area">没有账号？请
					<a id='reg1'>注册></a>
				</div>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.enterfocus.js"></script>
		<script type="text/javascript" src="../js/Common.js"></script>
		<script>
			(function($, doc) {
				$.init({
					statusBarBackground: '#f7f7f7'
				});
				var loginButton = doc.getElementById('login');
				$.plusReady(function() {

					loginButton.addEventListener('tap', function() {
						var username = doc.getElementById('account').value;
						var password = doc.getElementById('password').value;
						//官网的用户 /tools/submit_ajax.ashx?action=user_login&site=main
						mui.post('http://www.99990158.com/tools/submit_ajax.ashx?action=user_login&site=main', {

							"txtUserName": username,
							"txtPassword": password
						}, function(rps) {
							outLine(JSON.stringify(rps));
							if(rps.status != 0) {
								var state = {
									"LoginId": username,
									"type": "Account",
									"password": password,
									"token": username
								};

								localStorage.setItem('loginState', JSON.stringify(state));
								plus.nativeUI.toast('登陆成功');
								var settingPage = plus.webview.getWebviewById('examples/setting.html');

								settingPage.evalJS('ChangeHeadImg()');
								//直接返回设置页面
								plus.webview.getLaunchWebview().show();
								return;
								mui.back();
								return;
								toMain();
								main_loaded_flag = true;
							} else {
								plus.nativeUI.toast(rps.msg);
							}

						},'json');
						return;

						//这是直播室						
						mui.post('http://liveapi.99990158.com/oauth2/token', {
							"grant_type": "password",
							"username": username,
							"password": password
						}, function(rps) {

							if(rps.access_token) {
								var state = {
									"LoginId": username,
									"type": "Account",
									"password": password,
									"token": rps.access_token
								};

								localStorage.setItem('loginState', JSON.stringify(state));
								plus.nativeUI.toast('登陆成功');
								openWindowWithTitle('user.html','用户信息')
								return;
								toMain();
								main_loaded_flag = true;
							}

						});

					});
					var main_loaded_flag = false;

					var mainPage = $.preload({
						"id": 'user.html',
						"url": 'user.html' 
					});
					var toMain = function() {
						//使用定时器的原因：
						//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
						var id = setInterval(function() {
							if(main_loaded_flag) {
								clearInterval(id);
								$.fire(mainPage, 'show', null);
								mainPage.show("pop-in");
							}
						}, 20);
					};

				});

			}(mui, document));

			document.onkeydown = function(event) {
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if(e && e.keyCode == 27) { // 按 Esc 
					//要做的事情
				}
				if(e && e.keyCode == 113) { // 按 F2 
					//要做的事情
				}
				if(e && e.keyCode == 13) { // enter 键
					loginButton.toggle();
					//要做的事情
				}
			};

			document.getElementById('reg1').addEventListener('tap', function() {
				openWindowWithTitle('register.html', "注册")
			});
		</script>
	</body>

</html>